<template>
  <div class="top">
    <el-header style="text-align: right;font-size: 12px">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人信息</el-dropdown-item>
          <el-dropdown-item>退出系统</el-dropdown-item>
        </el-dropdown-menu>
        <span class="username">{{userInfo.username}}</span>
      </el-dropdown>
    </el-header>

  </div>
</template>

<script>
  import {mapGetters, mapMutations, mapActions} from 'vuex'

  export default {
    name: "top",

    computed: {
      ...
        mapGetters([
          'userInfo'
        ])
    }
  }
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .top {
    width: 100%;
  }
  .username{
    font-size: 20px;
    color:#409EFF;
  }

</style>
